<template>
  <view class="content">
    <view class="sticky">
      <view class="content-input">
        <image src="../../static/serach.png" />
        <input
          :value="searchText"
          placeholder="输入搜索信息"
          confirm-type="search"
          :adjust-position="false"
          auto-blur
          placeholder-style="font-size: 28rpx; font-weight: 500; color: #C6C7CB;"
          @confirm="handleSearch"
        />
        <uni-icons
          v-if="searchText"
          type="close"
          color="#999"
          size="24"
          @click="handleClear"
        />
      </view>
      <scroll-view
        scroll-x
        scroll-with-animation
        :scroll-into-view="scrollView"
        class="content-work"
      >
        <view
          v-for="(item, index) in tabList"
          :key="index"
          :id="`item${index}`"
          class="content-work-item"
          :class="{ active: one_category_id == item.id }"
          @click="changeOneCategory(item, index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
      <uni-data-select
        v-model="two_category_id"
        :localdata="categoryList"
        placeholder="请选择分类"
        empty-text="暂无分类"
        :clear="false"
        @change="changeTwoCategory"
      />
    </view>
    <view class="content-bottom">
      <view
        v-for="item in dataList"
        :key="item.id"
        class="content-item"
        @click="handleDetail(item)"
      >
        <view class="item-row">
          <view class="item-label">资料名称</view>
          <view class="item-value"> {{ item.name || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">一级类目</view>
          <view class="item-value"> {{ item.one_category || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">二级类目</view>
          <view class="item-value"> {{ item.two_category || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">创建时间</view>
          <view class="item-value"> {{ formatTime(item.add_time) }} </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="loadMore" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      searchText: "", // 搜索内容
      page: 1, // 页数
      total: 0, // 总条数
      scrollView: "item0", // 滚动到指定位置
      one_category_id: "", // 一级分类id
      two_category_id: "", // 二级分类id
      loadMore: "more", // 加载状态
      tabList: [], // 一级分类列表
      categoryList: [], // 二级分类列表
      dataList: [],
    };
  },
  onLoad() {
    this.getTabList();
  },
  onReachBottom() {
    if (this.loadMore === "more") {
      this.page++;
      this.getList();
    }
  },
  methods: {
    // 获取tab列表
    getTabList() {
      this.$https.get("/information/category").then((res) => {
        let list = res.data;
        if (list.length > 0) {
          this.one_category_id = list[0].id;
          list.forEach((i) => {
            if (i.children) {
              i.children = i.children.map((j) => {
                return {
                  ...j,
                  text: j.name,
                  value: j.id,
                };
              });
            } else {
              i.children = [];
            }
            i.children.unshift({
              text: "全部",
              value: "",
              id: "",
            });
          });
          this.tabList = list;
          this.categoryList = res.data[0]?.children || [];
          if (this.categoryList.length > 0) {
            this.two_category_id = "";
            this.getList();
          }
        }
      });
    },
    // 搜索
    handleSearch({ detail }) {
      this.searchText = detail.value;
      this.two_category_id = "";
      this.page = 1;
      this.getList();
    },
    // 清空搜索
    handleClear() {
      this.searchText = "";
      this.two_category_id = "";
      this.page = 1;
      this.getList();
    },
    // 切换一级分类
    changeOneCategory(item, index) {
      if (this.one_category_id == item.id) return;
      this.scrollView = `item${index}`;
      this.one_category_id = item.id;
      this.two_category_id = "";
      this.categoryList = item.children || [];
      this.page = 1;
      this.getList();
    },
    // 切换二级分类
    changeTwoCategory(id) {
      this.page = 1;
      this.two_category_id = id;
      this.getList();
    },
    // 查看资料详情
    handleDetail(item) {
      uni.navigateTo({
        url: `/pages/information/detail?id=${item.id}`,
      });
    },
    // /information/file
    // 获取数据
    getList() {
      this.loadMore = "loading";
      this.$https
        .get("/information/list", {
          page: this.page,
          one_category_id: this.one_category_id,
          two_category_id: this.two_category_id,
          name: this.searchText,
        })
        .then((res) => {
          let list = res.data.data || [];
          this.dataList = this.page === 1 ? list : this.dataList.concat(list);
          this.total = res.data.total;
          this.changeLoadStratus();
        })
        .catch(() => {
          this.changeLoadStratus();
        });
    },
    // 改变加载状态
    changeLoadStratus() {
      if (this.dataList.length >= this.total) {
        this.loadMore = "noMore";
      } else {
        this.loadMore = "more";
      }
    },
    // 格式化日期
    formatTime(time) {
      if (!time) return "";
      let date = new Date(time * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let i = date.getMinutes();
      i = i < 10 ? "0" + i : i;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background-color: #fff;
  .sticky {
    position: sticky;
    /* #ifdef MP-WEIXIN || APP-PLUS */
    top: 0;
    /* #endif */
    /* #ifdef H5 */
    top: 86rpx;
    /* #endif */
    z-index: 9;
    padding: 28rpx 32rpx 8rpx;
    background-color: #fff;
  }
  &-input {
    display: flex;
    align-items: center;
    height: 80rpx;
    background: #f6f6fb;
    border-radius: 44rpx;
    padding: 0 24rpx;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 34rpx;
    }
    input {
      flex: 1;
    }
  }
  &-work {
    padding-top: 20rpx;
    height: 88rpx;
    white-space: nowrap;
    &-item {
      display: inline-block;
      min-width: 100rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #969699;
      line-height: 48rpx;
      padding: 0 10rpx;
      text-align: center;
    }
    .active {
      font-size: 28rpx;
      font-weight: 550;
      color: #141414;
      position: relative;
      &::before {
        content: "";
        width: 60rpx;
        height: 8rpx;
        border-radius: 8rpx;
        background-color: $public-oclor;
        position: absolute;
        bottom: -16rpx;
        left: 50%;
        margin-left: -30rpx;
      }
      &::after {
        content: "";
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
        background-color: $public-oclor;
        position: absolute;
        bottom: -16rpx;
        left: 50%;
        margin-left: -40rpx;
      }
    }
  }
  &-bottom {
    padding: 0 32rpx;
  }
  &-item {
    background-color: #ffffff;
    box-shadow: 0 0 10rpx rgb(229, 239, 243);
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    color: #141414;
    .item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
      font-size: 28rpx;
      .item-label {
        width: 140rpx;
      }
      .item-value {
        flex: 1;
        text-align: right;
        color: #666;
      }
    }
  }
}
</style>
